<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Login Success</title>
    <link rel="stylesheet" href="/css/bootstrap/bootstrap.css">
    <link rel="stylesheet" href="/css/bootstrap/bootstrap-theme.css">
    <script src="/js/jquery.js"></script>
    <script src="/js/bootstrap.js"></script>
    <style>
        @font-face{
            font-family: QS-R;
            src:url(/font/Quicksand-Regular.ttf);
        }

        @font-face{
            font-family: QS-M;
            src:url(/font/Quicksand-Medium.ttf);
        }

        @font-face{
            font-family: QS-L;
            src:url(/font/Quicksand-Light.ttf);
        }

        @font-face{
            font-family: QS-B;
            src:url(/font/Quicksand-Bold.ttf);
        }

        @font-face{
            font-family: QS-SB;
            src:url(/font/Quicksand-SemiBold.ttf);
        }
        .inner-window {
            width: 500px;
            margin: 0 auto;
            text-align: center;

        }
        .input{
            width: 285px;
            height: 60px;
            font-family:QS-M;
            font-size: 25px;
            color: black;
            background-color:rgba(157,157,157,.15);
            background-position: 15px;
            background-repeat: no-repeat;
            background-size: 35px 35px;
            border:none;
            border-radius: 8px;
        }
        .button:hover{
            cursor: pointer;
        }
        .button {
            width:126px;
            height:40px;
            color:white;
            background-color:#004aad;
            border:none;
            border-radius:8px;
            font-family:QS-M;
            font-size: 20px;
        }
        .inner-window .button-bar {
            margin-top: 50px;
            margin-left: 200px;
        }
        .button:active{
            background-color: darkblue;
        }
        .text::-webkit-input-placeholder{
            font-family: QS-R;
            text-align: left;
            font-size: 20px;
        }
        .text{
            margin-top:20px;
            padding-left:20px;
            font-family: QS-R;
        }

        .inner-window .button-button-bar {
            margin-top: 50px;
            margin-left: 240px;
        }

        .inner-window .week {
            margig: 0;
            padding-left: 20px;
            width: 180px;
            height: 60px;
            font-family: QS-M;
            font-size: 25px;
            color: black;

            border: none;
            border-radius: 8px;
        }

        .inner-window .start-time {
            margig: 0;
            padding-left: 20px;
            font-family: QS-R;
            width: 80px;
            height: 60px;
            font-family: QS-M;
            font-size: 25px;
            color: black;

            border: none;
            border-radius: 8px;
        }

        .inner-window .end-time {
            margig: 0;
            padding-left: 20px;
            font-family: QS-R;
            width: 80px;
            height: 60px;
            font-family: QS-M;
            font-size: 25px;
            color: black;

            border: none;
            border-radius: 8px;
        }
        .time-bar {
            height: 80px;
            line-height: 80px;
        }
        .inner-window .add-icon-bar {
            height: 80px;
            width: 48px;
            padding: 24px;

        }
        .inner-window .add-icon-bar .add-icon{
            position:absolute ;
            left:50% ;
            margin-left: -24px;
            top:50% ;
            margin-top: -24px;
        }

        *{
            list-style: none;

        }
    </style>
</head>
<body style="width:100%">
<div class="login inner-window" th:object="${session.currentLoginUser}">
    <div align="center">
        <img src="/image/LOGO.png" style="width:222px;height:114px;">
    </div>
    <div id="courseInfo-bar" style="margin-top: 80px;">
        <span style="font-size: 30px;font-family: QS-L;font-weight: bolder;margin-right: 50px">Course ID</span>
        <input type="text" id="courseId" name="courseId" class="input text" placeholder="Please Enter the course ID"><br/>
        <div id="err-msg" style="color: red;display: none"></div>
        <span style="font-size: 30px;font-family: QS-L;font-weight: bolder;">Course group</span>
        <input type="text" id="courseGroup" name="courseGroup" class="input text" placeholder="Please Enter the course group"><br/>
        <div class="button-bar">
            <input onclick="document.location='/accountInfo'" type="button"  class="button" Value="Back">
            <input type="button" id="next" class="button back" Value="Next">
        </div>
    </div>


    <div id="courseCode-bar" style="margin-top: 80px; display: none">
        <span style="font-size: 30px;font-family: QS-L;font-weight: bolder;margin-right: 1px">Course Name</span>
        <input type="text" id="courseName" name="coursePassword" class="input text" placeholder="Please Enter a course name"><br/>
        <span style="font-size: 30px;font-family: QS-L;font-weight: bolder;margin-right: 12px">Course Code</span>
        <input type="text" id="coursePassword" name="coursePassword" class="input text" placeholder="Please Enter a course code"><br/>
        <div style="text-align: left">
            <span style="font-size: 30px;font-family: QS-L;font-weight: bolder;margin-right: 12px">Course Time:</span>
        </div>
        <style>

            .inner-window .week-bar{
                width: 200px;
            }

            .inner-window .start-time-bar{
                width: 100px;
            }

            .inner-window .time-bar {
                display: flex;
            }

            .inner-window .time-bar .dropdown-menu {
                top:94%;
                left: 10px;

            }
        </style>
        <div class="time-bar">

            <div class="dropdown week-bar">
                <button value="Dropdown" class="week btn btn-default dropdown-toggle" type="button" id="week" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">

                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" aria-labelledby="week">
                    <li><a>Monday</a></li>
                    <li><a>Tuesday</a></li>
                    <li><a>Wednesday</a></li>
                    <li><a>Thursday</a></li>
                    <li><a>Friday</a></li>
                    <li><a>Saturday</a></li>
                    <li><a>Sunday</a></li>
                </ul>
            </div>
            <span style="font-size: 30px;font-family: QS-L;font-weight: bolder;margin-right: 12px">:</span>
            <div class="dropdown start-time-bar">
                <button class="start-time btn btn-default dropdown-toggle" type="button" id="start-time" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">

                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" aria-labelledby="start-time">
                    <li><a>8</a></li>
                    <li><a>9</a></li>
                    <li><a>10</a></li>
                    <li><a>11</a></li>
                    <li><a>12</a></li>
                    <li><a>14</a></li>
                    <li><a>15</a></li>
                    <li><a>16</a></li>
                    <li><a>17</a></li>
                    <li><a>18</a></li>
                </ul>
            </div>
            <span style="font-size: 30px;font-family: QS-L;font-weight: bolder;margin-right: 12px">-</span>
            <div class="dropdown">
                <button class="end-time btn btn-default dropdown-toggle" type="button" id="end-time" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">

                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" aria-labelledby="end-time">
                    <li><a>8</a></li>
                    <li><a>9</a></li>
                    <li><a>10</a></li>
                    <li><a>11</a></li>
                    <li><a>12</a></li>
                    <li><a>14</a></li>
                    <li><a>15</a></li>
                    <li><a>16</a></li>
                    <li><a>17</a></li>
                    <li><a>18</a></li>
                </ul>
            </div>
            <span class="add-icon-bar"  style="position: relative;margin-left: 20px">
                <svg t="1642588548808" class="add-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2147" data-spm-anchor-id="a313x.7781069.0.i1" width="48" height="48"><path d="M510.833431 62.695924c-247.644193 0-448.406636 200.762443-448.406636 448.406636 0 247.65545 200.762443 448.416869 448.406636 448.416869 247.65545 0 448.416869-200.76142 448.416869-448.416869C959.2503 263.458367 758.488881 62.695924 510.833431 62.695924zM779.544429 562.112328 560.358381 562.112328l0 219.186048-102.008278 0L458.350103 562.112328 239.164055 562.112328l0-102.008278 219.186048 0L458.350103 240.918002l102.008278 0 0 219.186048 219.186048 0L779.544429 562.112328z" p-id="2148" data-spm-anchor-id="a313x.7781069.0.i0" class="selected" fill="#bfbfbf"></path></svg>
            </span>

        </div>



        <input type="hidden" id="uniId" name="uniId" th:value="*{uniId}">
        <input type="hidden" id="userId" name="uniId" th:value="*{userId}">
        <div class="button-button-bar">
            <input type="button" id="back" class="button back" Value="Back">
            <input type="button" id="submit" class="button back" Value="Submit">
        </div>
    </div>

</div>
<script>
    $('#next').click(function () {


        $.ajax({
            url:"/course/isCourseExists",
            dataType:"JSON",
            data:{
                courseId:document.getElementById("courseId").value,
                courseGroup:document.getElementById("courseGroup").value,
                uniId:document.getElementById("uniId").value
            },
            method:"GET",
            success:function (data) {
                if (data.code===true){
                    $("#courseCode-bar").toggle();
                    $("#courseInfo-bar").toggle()
                }else {
                    alert(data.errMsg)

                }
            }
        })


    })

    $("#back").click(function () {
        $("#courseInfo-bar").toggle()
        $("#courseCode-bar").toggle();
    })

    $("#submit").click(function () {
        let courseId = document.getElementById("courseId").value;
        let courseGroup = document.getElementById("courseGroup").value;
        let uniId = document.getElementById("uniId").value;
        let coursePassword = document.getElementById("coursePassword").value;


        let timeList = new Array();
        $(".week").each(function (index,data) {
            let week = $(data).val();
            let startTime = $(".start-time").eq(index).val();
            let endTime = $(".end-time").eq(index).val();
            if (week && startTime && endTime){
                timeList.push(
                    {
                        courseId:courseId,
                        courseGroup:courseGroup,
                        uniId:uniId,
                        startTime:startTime,
                        endTime:endTime,
                        week:week
                    }
                )
            }

        })

        $.ajax({
            url:"/course/doCreateCourse",
            contentType:"application/json;charset=UTF-8",
            dataType: "JSON",
            data:JSON.stringify({
                userId:document.getElementById("userId").value,
                courseName:document.getElementById("courseName").value,
                courseId:document.getElementById("courseId").value,
                courseGroup:document.getElementById("courseGroup").value,
                uniId:document.getElementById("uniId").value,
                coursePassword:document.getElementById("coursePassword").value,
                timeList:timeList
            }),
            method:"POST",
            success:function (data) {
                document.location='/accountInfo'
            }
        })
    })


    $(".dropdown li a").click(function (event) {
        console.log(event.currentTarget)
        $(event.currentTarget).parents(".dropdown-menu").prev().html($(event.currentTarget).html())
        $(event.currentTarget).parents(".dropdown-menu").prev().attr("value",$(event.currentTarget).html())
    })

    $(".add-icon-bar").click(function (event) {
        $("#courseCode-bar .time-bar:last").after($("#courseCode-bar .time-bar:last").clone(true));
        $(event.currentTarget).attr("hidden",true);
    })




</script>
</body>
</html>